<style lang="scss">
@import "./ZDragLoop/index.scss";
</style>

<template>
  <div class="z-dragxml-com z-drag-loop"
       :class="[zdrag__state_cls(), {['z-dragxml-loop--table']: widgetMode === 'table'}]"
       no-drag-line
       @dragenter.prevent.stop="onDragEnter"
       @mouseenter.stop="onMouseEnter"
       :z-drag-loop-uuid="uuid"
  >
    <!--    {{uuid}}-->
<!--    {{_zdrag__setCurHighLightUUID}}-->
<!--    <div>{{FIND_ARR_TYPE('level' + level)}}</div>-->
    <div style="color: var(--el-color-primary)">{{FIND_ARR_TYPE('未定义类型')}}</div>
    <div class="z-dragxml-loop__con">

      <!--    <z-drag-loop v-if="level < 1" :level="level + 1"></z-drag-loop>-->
      <div :id="zdrag_loop__genId(startUUID)" class="z-dragxml-loop__start"
           @dragenter.stop="zdrag_loop__onDragEnterStart(startUUID, $event)"
      >&nbsp;</div>
      <!--    {{widgets}}-->
      <div :id="zdrag_loop__genId(widget[0])" class="z-dragxml-loop__item"
           v-for="widget in widgets" :key="widget[0]"
           @dragenter.stop="zdrag_loop__onDragEnter(widget, $event)"

      >
        <!--      {{widget}}-->
        <component
            :is="widget[0]" :ref="widget[0]" v-if="widget && widget[0]"></component>
      </div>
      <div :id="zdrag_loop__genId(endUUID)" class="z-dragxml-loop__end"
           @dragenter.stop="zdrag_loop__onDragEnterEnd(endUUID, $event)"
           @dragleave.stop="zdrag_loop__onDragLeaveEnd"
      >&nbsp;</div>

    </div>
    <div class="z-drag-loop__append"
      v-if="ui_config_editor && ui_config_editor.ins && ui_config_editor.ins.ui && ui_config_editor.ins.ui.defType === 'arrayObj'"
    >
      <el-space>
        <el-button>新增一项</el-button>
      </el-space>
    </div>
  </div>
</template>

<script>
import {createZDragLoopDef} from "@/plugins/z-dragxml/components/ZDragLoop";

let def = createZDragLoopDef()
def.name = "ZDragLoop"
def.DRAG_GROUP =  'high'
export default def
</script>
